<template>
  <div id="app">
    <div v-show="role > 0">
      <div id="nav">
        <router-link to="/">提交申请</router-link> |
        <router-link to="/list" v-show="role>1">审批申请 |</router-link>
        <router-link to="/download">下载License</router-link> |
        <router-link to="/about">About</router-link> |
        当前用户：{{loginName}} |
        <a href="#" v-on:click="logout">退出</a>
      </div>
      <router-view/>
    </div>
    <div v-show="role <= 0">
      用户名 <input name="user" v-model="user" placeholder=""><br>
      密码 <input type="password"  name="password" v-model="pass" placeholder=""><br>
      <button v-on:click="login">登录</button>

    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "ListApply",
  data () {
    return {
      user: "",
      pass: "",
      loginName: "not login",
      loginId: -1,
      role: 0
    }
  },

  created() {
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    login(){
      let param = {userName: this.user,password:this.pass};
      axios.post('api/login/login', param).then(res => {
        if(res.data.status>=0){
          this.role = res.data.user.roleId;
          this.loginId = res.data.user.id;
          this.loginName = res.data.user.viewName;
          alert("hi "+ this.loginName );
        }
      });

    },
    logout(){
      this.role=0;


    },
  }
}
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
